  <template>
	<view class="zai-box">
        <scroll-view scroll-y class="page">
            <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<!-- <image src="../../static/BG.png" mode="aspectFill" class="zai-logo "></image> -->
				<view class="welComeBox">
					<view class="welComeText">欢迎来到</view>
					<view class="welComeEn">Welcom Back!</view>
				</view>
				<view class="zai-title text-shadow ">密码登录 </view>
			</view>
            <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block v-if="loginWay==1">
					<view class="topLine"></view>
					<view :class="[shape=='round'?'round':'']">
						<!-- <view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view> -->
						<input placeholder="请输入账号" name="input" v-model="userName"></input>
					</view>
					<view :class="[shape=='round'?'round':'']">
						<!-- <view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view> -->
						<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />
						<!-- <view class="action text-lg">
						    <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text>
						</view> -->
					</view>
					<view class="padding text-center margin-top">
						<button class="cu-btn bg-blue lg margin-right shadow" style="background: rgba(19, 202, 156, 1);" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
						<!-- <button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="loginWay=3-loginWay">短信登录
						</button> -->
					</view>
				</block>
                <block v-else>
                	<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
                		<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
                		<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
                	</view>
                	<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
                		<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
                		<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
                		<view class="action">
                			<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
                		</view>
                	</view>
                	<view class="padding text-center margin-top">
                		<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                			@tap="onSMSLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
                		</button>
                		<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                			@tap="loginWay=1">账户登录
                		</button>
                	</view>
                </block>
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="../../static/indexIcon.jpg" mode="aspectFit" class="round"></image>
			<view class="gray-text">登录中...</view>
		</view>
    </view>

</template>

<script>
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { mapActions } from "vuex"
    import configService from '@/common/service/config.service.js';
	
    export default {
        data() {
            return {
				shape:'',//round 圆形
				loading: false,
				userName: uni.getStorageSync('userName')? uni.getStorageSync('userName'):'',
				password: uni.getStorageSync('password')? uni.getStorageSync('password'):'',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version:'',
				//第三方登录相关信息
				thirdType:"",
				thirdLoginInfo:"",
				thirdLoginState:false,
				bindingPhoneModal:false,
				thirdUserUuid:'',
				url: {
					bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
				},
				thirdId:'',//小程序的openId
            };
        },
		onLoad:function(){
			this.wxLogin();
			// #ifdef APP-PLUS
			var that=this
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
				that.version=wgtinfo.version
			});
			// #endif
		},
		computed: {
		      isSendSMSEnable() {
		        return this.smsCountDown <= 0 && this.phoneNo.length > 4;
		      },
		      getSendBtnText() {
		        if (this.smsCountDown > 0) {
		          return this.smsCountDown + '秒后发送';
		        } else {
		          return '发送验证码';
		        }
		      },
		      canSMSLogin() {
		        return this.userName.length > 4 && this.smsCode.length > 4;
		      },
		      canPwdLogin() {
		        return this.userName.length > 4 && this.password.length > 4;
		      },
		},
        methods: {
			valiFunc:function(id){
				let _this = this;
				this.$http.get('/sys/validateUserByOpenId',{params:{
					openId:id
				}}).then(res=>{
					console.log('验证openid:',res);
					if(res.data.result.id){//如果已经绑定，则进行默认登录
						_this.onLogin(res.data.result)
					}else{//如果没有，则需手动登录并且传入thirdId
						
					}
				})
			},
			wxLogin:function(){
				let _this = this;
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event){
						_this.$http.get('/sys/getjscode2session',{params:{code:event.code}}).then(res=>{
							if(res.data.success){
								_this.thirdId = res.data.result.openid
								_this.valiFunc(res.data.result.openid)
							}
							console.log('登陆后的请求openid：',res.data.result.openid)
						})
						console.log('登录成功',event.code)
						//  uni.getUserInfo({
						//   provider: 'weixin',
						//   success: function (infoRes) {
						// 	console.log('用户昵称为：',infoRes);
						//   }
						// });
						// const {code} = event
						// //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						// uni.request({
						//     url: 'https://www.example.com/loginByWeixin', //仅为示例，并非真实接口地址。
						//     data: {
						//         code: event.code
						//     },
						//     success: (res) => {
						//         //获得token完成登录
						// 		uni.setStorageSync('token',res.token)
						//     }
						// });
					},
					fail: function (err) {
				        // 登录授权失败
						console.log('登录失败')
				        // err.code是错误码
				    }
				})
			},
			 ...mapActions([
				 "mLogin","PhoneLogin","ThirdLogin" ]),
			onLogin: function (obj){
				
				// this.$Router.replaceAll({name:'index'});
				// return;
					let loginParams = {
					  username:obj.username || this.userName,
					  password:obj.password || this.password,
					  thirdId:this.thirdId
					}
			        if(!loginParams.username || loginParams.username.length==0){
			          this.$tip.toast('请填写用户名');
			          return;
			        }
			        // if(!loginParams.password || loginParams.password.length==0){
			        //    this.$tip.toast('请填写密码');
			        //   return;
			        // }
			        
					this.loading=true;
			        this.mLogin(loginParams).then((res) => {
					  this.loading=false;
			          if(res.data.success){
						 // #ifdef APP-PLUS
						  this.saveClientId()
						 // #endif
						 // #ifndef APP-PLUS
						  this.$tip.success('登录成功!')
						  uni.setStorageSync('userName',this.userName);
						  uni.setStorageSync('password',this.password);
						  this.$Router.replaceAll({name:'index'})
						 // #endif
						}else{
			              this.$tip.alert(res.data.message);
			            }
			        }).catch((err) => {
			          let msg = err.data.message || "请求出现错误，请稍后再试"
			          this.loading=false;
					  this.$tip.alert(msg);
			        }).finally(()=>{
					  this.loading=false;
				})
			},
			saveClientId(){
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$httpthis.$http.get("/sys/user/saveClientId",{params:{clientId:cid}}).then(res=>{
					console.log("res::saveClientId>",res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({name:'index'})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onSMSSend() {
				let smsParams = {};
				smsParams.mobile=this.phoneNo;
				smsParams.smsmode="0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
                if(!smsParams.mobile || smsParams.mobile.length==0){
					this.$tip.toast('请输入手机号');
					return false
				}
				if(!checkPhone.test(smsParams.mobile)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/sys/sms",smsParams).then(res=>{
				  if(res.data.success){
					this.smsCountDown = 60;
					this.startSMSTimer();
				  }else{
					this.smsCountDown = 0;
					this.$tip.toast(res.data.message);
				  }
				});
			  },
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
				  this.smsCountDown--;
				  if (this.smsCountDown <= 0) {
					clearInterval(this.smsCountInterval);
				  }
				}, 1000);
			},
			onSMSLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				
				if(!this.phoneNo || this.phoneNo.length==0){
				  this.$tip.toast('请填写手机号');
				  return;
				}
				if(!checkPhone.test(this.phoneNo)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if(!this.smsCode || this.smsCode.length==0){
				  this.$tip.toast('请填短信验证码');
				  return;
				}
				let loginParams = {
				  mobile:this.phoneNo,
				  captcha:this.smsCode
				};
				this.PhoneLogin(loginParams).then((res) => {
				  console.log("res====》",res)
				  if(res.data.success){
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({name:'index'})
				  }else{
					this.$tip.error(res.data.message);
				  }
				}).catch((err) => {
				  let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
				  this.$tip.error(msg);
				});
			},
			loginSuccess() {
			  // 登陆成功，重定向到主页
			  this.$Router.replace({name:'index'})
			},
			requestFailed(err) {
			  this.$message.warning("登录失败")
			},
        },
		beforeDestroy() {
		    if (this.smsCountInterval) {
		        clearInterval(this.smsCountInterval);
		    }
		},
    }
</script>

<style>
    .login-paddingtop {
        padding-top: 100upx;
    }

    .zai-box {
        padding: 0 20upx;
        position: relative;
		padding: 0;
		height: 100vh;
		background:linear-gradient(360deg,rgba(19, 202, 156, 0.44),transparent,transparent);
		background-size: 100% 100%;
    }
	.page{
		height: 100%;
	}
    .zai-logo {
        width: 100%;
        height: 293px;
    }

    .zai-title {
		position: absolute;
		left: 24px;
		font-weight: bold;
		top: 190px;
       font-size: 15px;
	   line-height: 18px;
       color: #333333;
       text-align: center;
    }
	.welComeBox{
		position: absolute;
		left: 24px;
		top: 54px;
		
	}
	.welComeText{
		font-size: 32px;
		line-height: 37px;
		font-weight: bold;
	}
	.welComeEn{
		color: #BBCEE0;
		font-size: 20px;
		line-height: 24px;
		margin-top: 4px;
	}
    .input-placeholder, .zai-input {
        color: #94afce;
    }

    .zai-label {
        padding: 60upx 0;
        text-align: center;
        font-size: 30upx;
        color: #a7b6d0;
    }

    .zai-btn {
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100upx;
        font-size: 36upx;
    }

    .zai-btn:after {
        border: 0;
    }

    /*按钮点击效果*/
    .zai-btn.button-hover {
        transform: translate(1upx, 1upx);
    }
	.box{
		position: absolute;
		left: 0;
		top: 223px;
		width: 100%;
	}
	input{
		background-color: #F3F4F9;
		width: 100%;
		height: 48px;
		padding-left: 12px;
		border-radius: 4px;
		margin-top: 14px;
	}
	.topLine{
		height: 1px;
		background-color: #EEEEEE;
	}
	.box{
		padding-top: 0px;
	}
</style>
